<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>朋友圈圈</title>
  <link rel="stylesheet" href="./css/zui.css">
  <link rel="stylesheet" href="./css/nav.css">
  <style>
    .content_main{
      display: flex;
      border-bottom: 1px solid #f1f1f1;
      padding: 5px 0;
      box-sizing: border-box;
    }
    .right{
      margin-left: 10px;
      width: 80%;
    }
    .img_logo{
      border-radius: 5px !important;
    }
    .img_content{
      margin-top: 10px;
      width: 200px;
      height: auto;
    }
    .time{
      margin-top: 10px;
      color: #b4b4b4;
    }
    #show{
      position: absolute;
      top: 0;
      width: 100%;
      height: 100vh;
      background-color: #222;
      line-height: 100vh;
      display: none;
      z-index: 99999999;
    }
    /* main{
      height: 100vh;
      overflow: hidden;
     margin: 0;
    } */
    .show_img{
      width: 100%;
      height: auto;
      
    }
    .pl{
      float: right;
      margin-top: 1px;
    }
    .pl_content{
      text-align: right;
      margin-top: 5px;
      display: none;
    }
    .pl_content .btn{
      margin-top: 5px;
    }
    .pl_img{
      width: 30px;
      height: 30px;
      border-radius: 3px;
    }
    .pl_lsit{
      display: flex;
      margin-top: 5px;
    }
    h6{
      margin: 0;
    }
    .pl_msg{
      margin-left: 10px;
    }
    .pl_msg>div{
      font-size: 12px;
      color: #b4b4b4;
      margin-top: 5px;
    }
  </style>
</head>

<body>
  <div class="header">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <!-- 导航头部 -->
        <div class="navbar-header">
          <!-- 移动设备上的导航切换按钮 -->
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!-- 品牌名称或logo -->
          <a class="navbar-brand" href="/">朋友圈圈</a>

        </div>
        <!-- 导航项目 -->
        <div class="collapse navbar-collapse navbar-collapse-example">
          <ul class="nav navbar-nav navbar-right">
            <li class="send"><a href="javascript:;"><i class="icon icon-plus"></i> 发朋友圈</a></li>
            <li class="login"><a href="./login.html"><i class="icon icon-user"></i> 登录</a></li>
            <li class="dropdown" id="user">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon icon-user"></i> <span
                  class="user">admin</span> <b class="caret"></b></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="./upload.html">上传头像</a></li>
                <li onclick="goMsg()"><a href="javascript:;">我的论坛</a></li>
                <li class="out"><a href="javascript:;">退出</a></li>

              </ul>
            </li>
            <li>
              <img src="" alt="头像" class="user_logo">
            </li>
          </ul>
        </div>
    </nav>
  </div>
  <div class="a">
    <main>
 
    </main>
  </div>

  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
              class="sr-only">关闭</span></button>
          <h4 class="modal-title">评论</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <textarea class="form-control" rows="10" placeholder="输入评论" id="content"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="send" data-dismiss="modal">发布</button>
        </div>
      </div>
    </div>
  </div>
  <div id="show">
    <img src="./file/1.gif" alt="" class="show_img">
  </div>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/zui.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script src="./js/template.js"></script>
<template id="msg" type='text/html'>
  {{each data as item index}}
  <div class="content_main">
    <div>
      <img src="{{item.header}}" alt="" class="img_logo">
    </div>
    <div class="right">
      <h5>{{item.username}}</h5>
      <div>
        {{item.content}}
      </div>
      <div>
        <img src="{{item.imgurl}}" alt="" class="img_content" onclick="showImg('{{item.imgurl}}')">
      </div>
      <div class="time">
        {{item.time}}  <span class="pl" onclick="pl(this)"><i class="icon icon-chat"></i></span>
      </div>
      <div class="pl_content">
        <textarea class="form-control msg" rows="2"  placeholder="请输入内容"></textarea>
        <button class="btn btn-mini btn-success" type="button" onclick="sendPl('{{index}}')">评论</button>
      </div>
      {{each item.pinglun as value index}}
      <div class="pl_lsit">
        <div>
          <img src="{{value.header}}" alt="" class="pl_img">
        </div>
        <div class="pl_msg">
          <h6>{{value.username}} </h6>
          <div>
            {{value.content}}
          </div>
          <div>
            {{value.time}}
          </div>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
  {{/each}}
</template>
<script>
  // 判断当前用户的登录状态
  let username = $.cookie("username")
  if (username) {
    $(".login").hide();
    $("#user").show();
    $(".user_logo").show();
    $(".user").text(username)
    getHeader();
  } else {
    $(".login").show();
    $("#user").hide();
    $(".user_logo").hide();
  }

  function getHeader() {
    $.ajax({
      url: "/get/user",
      method: "get",
      success: (res) => {
        console.log(res)
        // 修改标签的属性
        $(".user_logo").attr("src", res.data)
        // 将获取到的头像存储到sessionstorge中
        sessionStorage.setItem("header", res.data)
      }
    })
  }

  // 退出登录
  $(".out").click(function () {
    let isOut = confirm("您确定要退出吗？")
    if (isOut) {
      //  删除cookie退出登录
      $.removeCookie("username")
      //  刷新页面
      location.reload();
    }
  })
  // 点击发表跳转页面
  $(".send").click(function () {
    //判断当前是否含有cookie 若存在则证明已登录跳转
    if (username) {
      window.location.href = './sendmsg.html'
    } else {
      window.location.href = './login.html'
    }
  })
  // 获取信息列表
  getList();
  function getList() {
    $.ajax({
      url: "/get/friend",
      method: "get",
      success(res) {
        console.log(res)
        // 将当前登录的用户名存到res中用于模板渲染
        let html = template("msg", res)
        // console.log(html)
        $("main").html(html)
      }
    })
  }

    
  /* 
   评论流程：
   1.点击评论判断用户是否登录
   2.点击发表获取输入框内容，获取当前评论人
   3.获取评论用户头像 获取当前评论的索引
   4.发送ajax请求将获取到的数据传递到服务端
   5.服务端获取前端传递的数据
   6.读取data.json中的数据
   7.根据索引找到要评论的数据
   8.将需要存储的数据组合成一个对象添加到对应数据的评论列表
   9.重新写入数据 评论成功
   10.客户端从新请求列表数据，或则刷新页面
  */
  // 声明全局变量接受评论索引
  let msgIndex = "";
  function pinglun(index) {
    if (!username) {
      window.location.href = 'login.html'
      return
    }
    msgIndex = index;
  }

  $("#send").click(function () {
    // 获取文本框内容
    let content = $("#content").val();
    // 获取session中存储的头像
    let header = sessionStorage.getItem("header")
    console.log(content, header)
    console.log(msgIndex, username)
    $.ajax({
      url: "/pinglun/msg",
      method: "post",
      data: {
        content,
        header,
        username,
        msgIndex
      },
      success(res) {
        console.log(res)
        if (res.code == 0) {
          $("#content").val("")
          new $.zui.Messager("评论成功", {
            type: "success",
            icon: 'check',
            time: 1000
          }).show();
          getList();
        } else {
          new $.zui.Messager("评论失败", {
            type: "warning",
            icon: 'warning-sign',
            time: 2000
          }).show();
        }
      }
    })
  })
// // 点击头像跳转个人中心
// function gomymsg(username){
//   console.log(username)
//   // return
//   window.location.href = 'mymsg.html?username='+username
// }

function goMsg(){
  window.location.href = 'mymsg.html?username='+$.cookie("username")
}

function showImg(url){
    $(".a").css({
      height:"100vh",
      overflow: "hidden"
    })
       $("#show").fadeIn(300,function(){
        
       })
       $(".show_img").attr("src",url);
     
 
}
$("#show").click(function(){
  $(".a").css({
      height:"auto",
      overflow: "auto"
    })
  $("#show").fadeOut(500)
})
let isshow = false
function pl(e){
  // console.log(e)
  isshow = !isshow
  if(isshow){
    $(e).parent().next().slideDown(200);
  }else{
    $(e).parent().next().slideUp(200);
  }
} 
 function sendPl(index){
   let content = $(".msg")[index].value;
   let header =  sessionStorage.getItem("header");
   $.ajax({
     url:"/py/pl",
     method:"post",
     data:{
       index,
       content,
       header
     },
     success(res){
      console.log(res)
      window.location.reload();
     }
   })
}
</script>

</html>